<template>
  <div class="page-filter">
    <div class="page-filter-left">
      <a-button type="primary" @click="addAd">添加广告</a-button>
      <a-button @click="setSlideTime">设置轮播时长</a-button>
      <a-button @click="batchStatus(1)">启用</a-button>
      <a-button @click="batchStatus(2)">禁用</a-button>
      <a-button danger @click="deleteAd">删除</a-button>
    </div>
    <div class="page-filter-right">
      <div class="show">
        <a-select
          v-model:value="slideAdState.status"
          placeholder="全部状态"
          class="select-m-r-24"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
          <a-select-option :value="undefined">全部状态</a-select-option>
          <a-select-option :value="1">启用</a-select-option>
          <a-select-option :value="2">禁用</a-select-option>
        </a-select>
        <a-input v-model:value.trim="slideAdState.id" class="input-m-r-16 w-[250px]" placeholder="请输入广告ID" />
        <a-input
          v-model:value.trim="slideAdState.name"
          class="input-m-r-16 w-[250px]"
          placeholder="请输入广告标题关键词"
        />
        <a-button type="primary" class="m-r-8" @click="handleSearch">搜索</a-button>
        <a-button class="btn-m-r-24" @click="handleReset">重置</a-button>
      </div>
    </div>
  </div>
  <!-- 添加/编辑对话框 -->
  <modal-view
    title="设置轮播时长"
    v-model:visible="statusState.slideVisible"
    okText="确定"
    cancelText="取消"
    :width="378"
    @confirm="formConfirm"
    @cancel="formCancel"
  >
    <a-form ref="formRef" :model="formState" :rules="formRules" :colon="false">
      <a-form-item label="轮播时长" name="slideTime">
        <a-input-number id="inputNumber" v-model:value="formState.slideTime" class="w-[226px]" :min="1" :max="10" />
        <div class="text-[12px] text-[#bfbfbf] mt-[8px]">注：可设置1-10秒，默认轮播时长为5秒</div>
      </a-form-item>
    </a-form>
  </modal-view>
  <!-- 删除对话框 -->
  <modal-view
    title="提示"
    v-model:visible="deleteVisible"
    okText="确定"
    cancelText="取消"
    :width="458"
    @confirm="deleteConfirm"
    @cancel="deleteCancel"
  >
    <span>确定要删除该广告吗</span>
  </modal-view>
</template>
<script lang="ts" setup>
import { slideAdState, statusState, resetState } from '../state'
import ModalView from '@/components/components/modal/ModalView.vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import apis from '@/apis'
import { ref, reactive, onMounted } from 'vue'
import { storage } from '@/utils/storage'
const {
  advertising: { delete_batch, batch_update_status, set_slide_time, get_showtime }
} = apis
const emit = defineEmits(['update-list'])
const formRef = ref()
const libraryId = storage.get('libraryId')
const deleteVisible = ref(false)
//添加轮播form数据
const formState = reactive<{ slideTime: number }>({
  slideTime: 5
})
const formRules = reactive({
  slideTime: [{ required: true, message: '请设置轮播时长' }]
})
const router = useRouter()
const deleteAd = () => {
  if (!statusState.selectedRowKeys.length) return message.warning('请选择至少一个广告进行删除')
  deleteVisible.value = true
}
//新建轮播
const addAd = () => {
  router.push({ name: 'EditSlideAd' })
}
//设置轮播时长
const setSlideTime = () => {
  statusState.slideVisible = true
}
//批量编辑状态
const batchStatus = (status: number) => {
  if (!statusState.selectedRowKeys.length) return message.warning('请选择至少一个广告进行编辑')
  const data = {
    ids: statusState.selectedRowKeys,
    status
  }
  batch_update_status(data).then((res: any) => {
    message.success('批量编辑成功')
    statusState.selectedRowKeys = []
    emit('update-list')
  })
}
/**
  设置轮播时长对话框事件
 */
const formConfirm = (value: any) => {
  console.log('value: ', value)
  formRef.value.validate().then(() => {
    //请求
    set_slide_time({ show_time: formState.slideTime, adv_library_id: libraryId }).then((res: any) => {
      statusState.slideVisible = value
      message.success('轮播时长设置成功')
      emit('update-list')
      getShowTime()
    })
  })
}
const formCancel = () => {
  statusState.slideVisible = false
}
/**
  删除广告对话框事件
 */
const deleteConfirm = (value: any) => {
  console.log('value: ', value)
  delete_batch({ ids: statusState.selectedRowKeys }).then(() => {
    message.success('批量删除成功')
    deleteVisible.value = value
    emit('update-list')
  })
}
const deleteCancel = () => {
  deleteVisible.value = false
  statusState.selectedRowKeys = []
}
const handleSearch = () => {
  console.log(slideAdState)
  emit('update-list')
}
const handleReset = () => {
  resetState()
  console.log(slideAdState)
  emit('update-list')
}
//获取轮播时长
const getShowTime = () => {
  get_showtime({ adv_library_id: libraryId }).then((res: any) => {
    console.log('res1: ', res.show_time)
    formState.slideTime = res.show_time
  })
}
onMounted(() => {
  getShowTime()
  statusState.selectedRowKeys = []
  resetState()
})
</script>

<style lang="less" scoped>
@common-color: #0083ff; // sea blue

.page-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  &-left {
    display: flex;
    flex-wrap: nowrap;

    margin-top: 10px;

    .ant-btn:not(:last-child) {
      margin-right: 16px;
    }

    .ant-btn:last-child {
      background-color: rgba(254, 76, 77, 0.08);
      margin-right: 16px;
    }
  }

  &-right {
    display: flex;
    align-items: center;

    .select-m-r-24 {
      width: 196px;
      height: 32px;
      margin: 10px 24px 0 0;
    }

    .input-m-r-16 {
      height: 32px;
      margin: 10px 16px 0 0;
    }

    .btn-m-r-24 {
      margin: 10px 24px 0 0;
    }

    .m-r-8 {
      margin: 10px 8px 0 0;
    }
  }
}
</style>
